<template>
	<view class="wrap">	
		<view class="flex info-wap" @click="toUserEdit()">
			<view class="flex-1">
				<view class="fc-32 fs-36">{{resumeData.resumeName || userInfo.nickname}}</view>
				<view class="fs-26 fc-66">暂无介绍~</view>
			</view>
			<view class="info-img flex">
				<view class="head-img"><image :src=" resumeData.resumeHead|| userInfo.avatar"></image></view>
				<image class="backicon" src="https://web.suqzp.com/public/jiantou.png"></image>
			</view>
		</view>
		<view class="flex info-wap" @click="toSkillEdit(resumeData.resumeAdvantage)">
			<view class="flex-1">
				<view class="fc-32 fs-36">个人优势</view>
				<view class="fs-26 fc-66">请填写个人优势~</view>
				<text class="item-content ellipsis-twoline margin-height-20">{{resumeData.resumeAdvantage||""}}</text>
			</view>
			<view class="info-img flex">				
				<image class="backicon" src="https://web.suqzp.com/public/jiantou.png"></image>
			</view>
		</view>
		<view class="flex info-wap">
			<view class="">
				<view class="fc-32 fs-36 lin-h-64">求职状态</view>
			</view>
			<view class="align-height flex flex-1">
				<view class="flex-1">
					<picker @change="bindPickerChange" :value="salaryIndex" range-key="dictValue" :range="workStatusArray">
						<input class="padding-10" style="text-align: right;" disabled placeholder="请选择求职状态" v-model="resumeData.jobStatus" />
					</picker>
				</view>
				<view class="info-img">
					<image src="https://web.suqzp.com/public/jiantou.png" class="backicon" style="top: 6rpx;"></image>
				</view>
			</view>
		</view>
		<view class="flex info-wap">
			<view class="">
				<view class="fc-32 fs-36 lin-h-64">学历</view>
			</view>
			<view class="align-height flex flex-1">
				<view class="flex-1">
					<picker @change="educationChange" :value="educationIndex" range-key="dictLabel" :range="educationArray">
						<input class="padding-10" style="text-align: right;" disabled placeholder="请选择个人学历" v-model="resumeData.education" />
					</picker>
				</view>
				<view class="info-img">
					<image src="https://web.suqzp.com/public/jiantou.png" class="backicon" style="top: 6rpx;"></image>
				</view>
			</view>
		</view>
		<view class="flex info-wap">
			<view class="">
				<view class="fc-32 fs-36 lin-h-64">工作年限</view>
			</view>
			<view class="align-height flex flex-1">
				<view class="flex-1">
					<picker @change="workTimeChange" :value="workTimeIndex" range-key="dictLabel" :range="workTimeArray">
						<input class="padding-10" style="text-align: right;" disabled placeholder="请选择工作年限" v-model="resumeData.workTime" />
					</picker>
				</view>
				<view class="info-img">
					<image src="https://web.suqzp.com/public/jiantou.png" class="backicon" style="top: 6rpx;"></image>
				</view>
			</view>
		</view>
		<view class="info-wap">
			<view class="expect"  @click="toExpectEdit(1)">
				<view class="flex-1 flex jcsb">
					<view class="fc-32 fs-36 flex-1">求职期望</view>
					<image class="addicon"  src="https://web.suqzp.com/public/add-icon.png"></image>
				</view>
				<view class="info-1" v-if="resumeData.expJobList.length == ''">				
					<image src="https://web.suqzp.com/public/qw.png"></image>
				</view>
			</view>
			<view class="mar-top-40" v-if="resumeData.expJobList.length > 0" v-for="(item, index) in resumeData.expJobList" :key="index" @click="toExpectEdit(2,item.expJobId)">
				<view class="flex" ><!-- -->
					<view class="text-sub-title fc-00">{{item.professionName}}</view>
					<view class="info-img">
						<image src="https://web.suqzp.com/public/jiantou.png" class="backicon" style="top: 6rpx;"></image>
					</view>
				</view>
				<view class="text-color mar-top-10">{{item.salaryRang}} . {{item.industryName}}</view>
			</view>
		</view>
		<view class="info-wap">
			<view class="gzjl"  @click="toWorkEdit(1)">
				<view class="flex-1 flex jcsb">
					<view class="fc-32 fs-36 flex-1">工作经历</view>
					<image class="addicon"  src="https://web.suqzp.com/public/add-icon.png"></image>
				</view>
				<view class="info-1" v-if="resumeData.expWorkList.length == ''">				
					<image src="https://web.suqzp.com/public/adjl.png"></image>
				</view>
			</view>
			<view class="margin-top-10" v-if="resumeData.expWorkList.length > 0" v-for="(item, index) in resumeData.expWorkList" :key="index" @click="toWorkEdit(2,item.expWorkId)"><!--  -->
				<view class="flex">
					<view class="text-sub-title flex-1">{{item.company}}</view>
				</view>
				<view class="text-color mar-top-15 flex jcsb">
					<view>{{item.workTitle}}</view>
					<view class="align-height flex">
						<text class="text-color-grey">{{item.workTimeBegin.slice(0,10)}} 至 {{item.workTimeEnd.slice(0,10)}}</text>		
						<view class="info-img">
							<image src="https://web.suqzp.com/public/jiantou.png" class="backicon" style="top: 6rpx;"></image>
						</view>
					</view>					
				</view>
				<view class="mar-top-10">
					<view>工作内容：</view>
					<view class="item-content ellipsis-twoline margin-height-20">{{item.workContent}}</view>
				</view>							
			</view>
		</view>
		<view class="info-wap">
			<view @click="toexpProEdit(1)">
				<view class="flex-1 flex jcsb">
					<view class="fc-32 fs-36 flex-1">项目经历</view>
					<image class="addicon"  src="https://web.suqzp.com/public/addicon.png"></image>
				</view>
				<view class="info-1" v-if="resumeData.expProjectList.length == ''">				
					<image src="https://web.suqzp.com/public/xm.png"></image>
				</view>
			</view>
			<view class="margin-top-10" v-if="resumeData.expProjectList.length > 0" v-for="(item, index) in resumeData.expProjectList" :key="index" @click="toexpProEdit(2,item.expProjectId)"><!--  -->
				<view class="flex">
					<view class="text-sub-title flex-1">{{item.projectName}}</view>					
				</view>
				<view class="text-color mar-top-15 flex jcsb">
					<view>{{item.projectRole}}</view>
					<view class="align-height flex">
						<text class="text-color-grey">{{item.projectTimeBegin.slice(0,10)}} 至 {{item.projectTimeEnd.slice(0,10)}}</text>
						<view class="info-img">
							<image src="https://web.suqzp.com/public/jiantou.png" class="backicon" style="top: 6rpx;"></image>
						</view>
					</view>
				</view>
				<view class="mar-top-10">
					<view>工作内容：</view>
					<view class="item-content ellipsis-twoline margin-height-20">{{item.projectContent}}</view>	
				</view>
							
			</view>
		</view>
		<view class="info-wap">
			<view @click="toEduEdit(1)">
				<view class="flex-1 flex jcsb">
					<view class="fc-32 fs-36 flex-1">教育经历</view>
					<image class="addicon"  src="https://web.suqzp.com/public/addicon.png"></image>
				</view>
				<view class="info-1"  v-if="resumeData.expEduList.length == ''">				
					<image src="https://web.suqzp.com/public/jy.png"></image>
				</view>
			</view>
			<view class="margin-top-10" v-if="resumeData.expEduList.length > 0"  v-for="(item, index) in resumeData.expEduList" :key="index" @click="toEduEdit(2,item.expEduId)">
				<view class="flex">
					<view class="text-sub-title flex-1">{{item.educationSchoolName}}</view>
					<view class="align-height flex">
						<text class="text-color-grey">{{item.educationTimeBegin.slice(0,10)}}</text>
						<view class="info-img">
							<image src="https://web.suqzp.com/public/jiantou.png" class="backicon" style="top: 6rpx;"></image>
						</view>
					</view>
				</view>
				<view class="text-color mar-top-15">{{item.educationName}} . {{item.educationSubjectName}}</view>
				<view class="mar-top-10">
					<view>在校经历:</view>
					<view class="two-ellipsis">{{item.educationWrok}}</view>
				</view>
			</view>
		</view>
		<view class="info-wap">
			<view class="flex-1">
				<view class="fc-32 fs-36 flex-1">个人风采</view>				
			</view>
			<view class="">
				<view class="fc-99 fs-24">支持图片类、doc、docx、pdf格式的文件，每个文件大小不超过10M，最多可上传5个文件</view>
				<view class="module-image">
					<view class="image_view" v-for="(item, index) in ablumList" :key="index" v-if="ablumList.length > 0">
						<image :src="item" class="release_img" @click="previewImg(index)"></image>
						<view class="img_delete center-algin" @click="deleteImg(index)"><text class="text-white text-size-base text-color-inverse">X</text></view>
					</view>
					<view class="release_img center-algin release_img_dottedLine" @click="companyUpload()" v-if="ablumList.length < 5"><text class="text-grey">+</text></view>
				</view>
			</view>			
		</view>		
		<view style="height: 100rpx;"></view>
		<view class="btn-row row">
			<button v-if="resumeId" type="warn" class="btn-delete" @tap="remove(resumeId)">删除</button>
			<button type="primary" class="btn-save" :class="resumeId ? 'width-55' : 'width-90'" @tap="register">保存简历</button>
		</view>
	</view>
</template>

<script>	
import { mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				ablumList: [],//个人风采
				workStatusArray:[],//求职状态
				educationArray: [], // 学历
				workTimeArray: [], // 工作年限
				salaryIndex: 0,		
				educationIndex: '',
				workTimeIndex: '',
				resumeId:'',
				advantage: '',
				userData:{
					resumeName:'',//用户名
					resumeHead:'',//头像
					resumeGender:'',//性别
					resumeBeginWorkTime:'',//工作时间
					resumeBirthDate:'',//生日
					age:'',
					resumeWechatNo:'',//微信号
					resumeEmail:'',//邮箱
					jobStatus:'',
					education:'',
					workTime:'',
					resumeId:'',					
					resumeAdvantage:'',
					resumeWxuserId:uni.getStorageSync('wxuser_id'),
					imgUrl:''
				},
				resumeData:{
					resumeAdvantage:'',
					jobStatus:'',//求职状态
					education:'',
					workTime:'',
					resumeMienVideo:'',//企业视频
					imgUrl:'',
				},//提交数据
			}
		},		
		onShow: function () {
			console.log('进入')
			this.getResumeDetail()	
		},
		onLoad(option) {
			this.resumeId = option.resumeId
			this.getJobStatus()
			this.getEducation()
			this.getWorkTime()
		},
		mounted() {},
		methods: {
			//用户简历详情
			async getResumeDetail(){				
				let res= await this.$apis.getResumeDetail(this.resumeId);
				if(res){	
					//判断优势为null
					if(res.data.resumeAdvantage =="null"){//个人优势为null  赋值空
						res.data.resumeAdvantage = this.advantage
						this.resumeData = res.data						
					}else{		
						if( this.advantage !=''){//个人优势-个人信息  修改返回后则覆盖原来接口数据  
							res.data.resumeAdvantage = this.advantage
							if(this.userData.resumeName !=''){//个人信息  修改返回后则覆盖原来接口数据  
								res.data.resumeHead = this.userData.resumeHead
								res.data.resumeName = this.userData.resumeName
								res.data.resumeGender = this.userData.resumeGender
								res.data.resumeBeginWorkTime = this.userData.resumeBeginWorkTime
								res.data.resumeBirthDate = this.userData.resumeBirthDate
								res.data.age = this.userData.age
								res.data.resumeWechatNo = this.userData.resumeWechatNo
								res.data.resumeEmail = this.userData.resumeEmail
							}else{
								this.resumeData = res.data	
							}						
							this.resumeData = res.data	
							this.ablumList = this.ablumList
						}else{
							if(this.userData.resumeName !=''){//个人信息  修改返回后则覆盖原来接口数据  
								this.userData.resumeAdvantage = res.data.resumeAdvantage
								res.data.resumeHead = this.userData.resumeHead
								res.data.resumeName = this.userData.resumeName
								res.data.resumeGender = this.userData.resumeGender
								res.data.resumeBeginWorkTime = this.userData.resumeBeginWorkTime
								res.data.resumeBirthDate = this.userData.resumeBirthDate
								res.data.age = this.userData.age
								res.data.resumeWechatNo = this.userData.resumeWechatNo
								res.data.resumeEmail = this.userData.resumeEmail	
								this.resumeData = res.data	
								this.ablumList = this.resumeData.imgUrl.split(',')
							}else{
								this.resumeData = res.data
								if(this.ablumList !=''){
									this.ablumList = this.ablumList
								/* 	this.ablumList = this.resumeData.imgUrl.concat(this.ablumList); */
								}else{
									this.ablumList = this.resumeData.imgUrl.split(',');
								}
								
							}
						}						
					}
				}
			},		
			//求职状态
			async getJobStatus(){
				let res= await this.$apis.getJobStatus();
				if(res){
					this.workStatusArray = res.data				
				}
			},
			// 获取学历 字典查询
			getEducation() {
				this.$apis.getDictTypeList('resume_education').then(res => {
					this.educationArray = res.data
				})
			},
			// 获取企业行业 字典查询
			getWorkTime() {
				this.$apis.getDictTypeList('work_time').then(res => {
					this.workTimeArray = res.data
				})
			},
			//个人信息
			toUserEdit(resumeWxuserId) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.userInfo,
					query: {
						resumeId:this.resumeId,
					}
				});
			},
			//个人优势
			toSkillEdit(resumeAdvantage) {	
				this.$mRouter.push({
					route: this.$mRoutesConfig.editSkill,
					query: {
						id:this.resumeId,
						content:this.resumeData.resumeAdvantage
					}
				});	
			},
			//求职状态
			bindPickerChange(e) {
				this.salaryIndex = e.target.value;
				this.resumeData.jobStatus = this.workStatusArray[this.salaryIndex].dictValue;		
			},
			//  学历
			educationChange(e) {
				console.log('educationChange',e.target.value)
				this.resumeData.education = this.educationArray[e.target.value].dictLabel;
			},
			// 工作年限
			workTimeChange(e) {
				console.log('workTimeChange',e.target.value)
				this.resumeData.workTime = this.workTimeArray[e.target.value].dictLabel;
			},
			//求职期望
			toExpectEdit(type,expJobId) {				
				if(type == 1){					
					this.$mRouter.push({
						route: this.$mRoutesConfig.editExpect,
						query: {
							resumeId:this.resumeId,
							expJobIds:''
						}
					});
				}else{
					this.$mRouter.push({
						route: this.$mRoutesConfig.editExpect,
						query: {
							resumeId:this.resumeId,
							expJobIds:expJobId
						}
					});
				}				
			},
			//工作经历
			toWorkEdit(type,expWorkId) {
				if(type == 1){
					this.$mRouter.push({
						route: this.$mRoutesConfig.editWork,
						query: {
							resumeId:this.resumeId,
							expWorkId:'',
						}
					});
				}else{
					this.$mRouter.push({
						route: this.$mRoutesConfig.editWork,
						query: {
							resumeId:this.resumeId,
							expWorkId:expWorkId
						}
					});
				}						
			},
			//项目经历
			toexpProEdit(type,expProjectId) {
				if(type == 1){
					this.$mRouter.push({
						route: this.$mRoutesConfig.editPro,
						query: {
							resumeId:this.resumeId,
							expProjectId:''							
						}
					});
				}else{
					this.$mRouter.push({
						route: this.$mRoutesConfig.editPro,
						query: {
							resumeId:this.resumeId,
							expProjectId:expProjectId
						}
					});
				}					
			},
			//教育经历
			toEduEdit(type,expEduId) {
				if(type == 1){
					this.$mRouter.push({
						route: this.$mRoutesConfig.editEdu,
						query: {
							resumeId:this.resumeId,
							expEduId:'',
						}
					});
				}else{
					this.$mRouter.push({
						route: this.$mRoutesConfig.editEdu,
						query: {
							resumeId:this.resumeId,
							expEduId:expEduId
						}
					});
				}
			},		
			//提交
			register(){		
				var that = this				
				that.resumeData.imgUrl = that.ablumList.toString()					
				//生成简历				
				if (!this.resumeData.resumeName) {
					uni.showToast({
						icon: 'none',
						title: '请完善个人信息'
					});
					return;
				}
				if(!this.resumeData.resumeAdvantage){
					uni.showToast({
						icon: 'none',
						title: '请输入个人优势'
					});
					return;
				}
				if(!that.resumeData.jobStatus){
					uni.showToast({
						icon: 'none',
						title: '请选择求职状态'
					});
					return;
				}
				if(!that.resumeData.education){
					uni.showToast({
						icon: 'none',
						title: '请选择个人学历'
					});
					return;
				}
				if(!that.resumeData.workTime){
					uni.showToast({
						icon: 'none',
						title: '请选择工作年限'
					});
					return;
				}
				this.userData.resumeName = that.resumeData.resumeName	
				this.userData.resumeHead = that.resumeData.resumeHead	
				this.userData.resumeGender = that.resumeData.resumeGender	
				this.userData.resumeBeginWorkTime = that.resumeData.resumeBeginWorkTime	
				this.userData.resumeBirthDate = that.resumeData.resumeBirthDate	
				this.userData.age = that.resumeData.age	
				this.userData.resumeWechatNo = that.resumeData.resumeWechatNo	
				this.userData.resumeEmail = that.resumeData.resumeEmail	
				this.userData.jobStatus = that.resumeData.jobStatus	
				this.userData.education = that.resumeData.education
				this.userData.workTime = that.resumeData.workTime	
				this.userData.resumeId = this.resumeId
				this.userData.resumeWxuserId = uni.getStorageSync('wxuser_id')
				this.userData.resumeAdvantage = this.resumeData.resumeAdvantage
				this.userData.imgUrl = that.resumeData.imgUrl
				console.log(this.userData)
				let res = this.$apis.updateResume(this.userData);
				console.log('res',res)
				// if (res) {
				// 	uni.navigateBack({
				// 		delta:1
				// 	})
				// }
			},
			//删除简历
			remove(resumeId){
				let res = this.$apis.deltelResume(resumeId);
				if (res) {
					uni.navigateBack({
						delta:1
					})
				}
			},
			// 选择图片
			companyUpload() {		
				let that = this;
				this.cover = '';
				uni.chooseMedia({
					count: 5 - that.ablumList.length,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					camera: 'back',
					success(res) {
						let tmpFiles = res.tempFiles;
						if (res.type == 'video') {	
							that.resumeData.resumeMienVideo = tmpFiles[0].tempFilePath
						} else {
							let data = that.ablumList
							if (data.length < 5) {
								for (var i = 0; i < tmpFiles.length; i++) {
									data.push(tmpFiles[i].tempFilePath);
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: '最多只能有5张图片'
								});
								return;
							}
							that.ablumList = data;												
						}				
					}
				});
			},
			// 查看图片
			previewImg(index) {
				uni.previewImage({
					indicator: 'number',
					loop: true,
					current: this.ablumList[index],
					urls: this.ablumList
				});
			},
			
			// 删除图片
			deleteImg(index) {
				if (this.mediaType == 0) {
					this.ablumList.splice(index, 1);
					// this.imgList.splice(index, 1);
				} else {
					this.imgList = [];
					this.mediaType = 0;
					this.$forceUpdate();
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
		.lin-h-64{
			line-height: 64rpx;
		}
		.info-wap{
			background: #fff;
			padding:26rpx 22rpx;
			margin-top: 20rpx;
			.info-img{
				image{
					width: 104rpx;
					height: 104rpx;
					display: inline-block;
					border-radius: 50%;
				}
				.backicon{
					width: 16rpx;
					height: 30rpx;
					display: inline-block;
					position: relative;
					top: 36rpx;
					margin-left: 24rpx;
				}				
			}
			.info-1{
				width: 642rpx;
				height: 128rpx;
				overflow: hidden;
				margin: 12px 0;
				image{
					width: 642rpx;
					height: 128rpx;
					display: block;
				}
			}
			.addicon{
				width: 36rpx;
				height:36rpx;
				position: relative;
				top: 4rpx;
			}
			.gr-main{
				.upload-pic{
					.addpic{
						width:204rpx;
						height:192rpx;
						background: #F6F6F6;
						border-radius: 8px;
						opacity: 1;
						margin: 0 10rpx 0 0;
					}
				}
				.video-pic{
					width: 466rpx;
					height:294rpx;
					background: #F8F8F8;
					border-radius:8rpx;
					opacity: 1;
				}
			}
			.text-sub-title{
				flex: 1;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
	.btn-row {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		left: 0;
		box-sizing: border-box;
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;	
		.btn-delete{
			background-color:#ccc;
			height: 90upx;
			line-height: 90upx;
			font-size: 34rpx;
			color: #333;
			width: 50%;
		}
		
		.btn-save{
			background-color: #84C0F4;
			height: 90upx;
			line-height: 90upx;
			font-size: 34rpx;
		}
		.width-55{
			width: 50%;
		}
		
		.width-90{
			width: 90%;
			display: block;
			margin: 0 auto;
		}
	}
	.module-image {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 0;
		view {
			display: flex;
		}
	}
	
.release_img {
	width: 180upx;
	height: 180upx;
	margin-right: 15upx;
	margin-bottom: 10upx;
}
.release_img_dottedLine {
	border: 1px dashed rgba(138, 138, 138, 1);
}
.release_img text {
	font-size: 50upx;
}

.release_img2 {
	width: 700upx;
	height: 450upx;
	margin-left: 20upx;
	margin-bottom: 10upx;
}

.image_view {
	position: relative;
	margin-right: 20rpx;
}

.image_view2 {
	position: relative;
	width: 94%;
	margin: 0 3%;
}

.img_delete {
	width: 45upx;
	height: 45upx;
	border-radius: 50%;
	background: rgba(234, 178, 178, 0.5);
	position: absolute;
	right: -15upx;
	top: -15upx;
	z-index: 10;
}
.gr-main{
			.upload-pic{
				.addpic{
					width:204rpx;
					height:192rpx;
					background: #F6F6F6;
					border-radius: 8px;
					opacity: 1;
					margin: 0 10rpx 0 0;
				}
			}
			.video-pic{
				width: 100%;
				height:294rpx;
				background: #F8F8F8;
				border-radius:8rpx;
				opacity: 1;
				.addpic{
					text-align: center;
					line-height: 294rpx;
					flex: auto;
					font-size: 72rpx;
					color: #999;
				}
			}
			padding-bottom: 200rpx;
		}
</style>
